<template>
    <div>
        <home-header ref="homeHeader" :nav="nav" :logo="logoInfo" @openLogin="openLogin"
            @loginOut="loginOut"></home-header>
        <banner-top :topImg="topInfo"></banner-top>
        <main class="main-box">
            <section class="content-box">
                <div class="content-left">
                    <banner :banner="banner"></banner>
                    <article-item :article="article"></article-item>
                    <div class="more" v-if="isShowMore">加载中</div>
                </div>
                <div class="content-right" :style="rightStyle">
                    <login :type="loginTypes" ref="login" @loginSuccess="loginSuccess"></login>
                    <user-info :userInfo="userInfo"></user-info>
                    <my-label :labels="labels"></my-label>
                    <wbrs :wbrs="wbrs"></wbrs>
                </div>
            </section>
        </main>
        <login :type="['phone']" ref="phineLogin" :title="logoInfo.title" @loginSuccess="loginSuccess"></login>
        <public-footer :userInfo="logoInfo" :links="links"></public-footer>
        <scoll-top></scoll-top>
    </div>
</template>

<script>
import HomeHeader from '~/components/home-header/index.vue';
import bannerTop from "~/components/banner-top/index.vue";
import banner from "~/components/banner/index.vue";
import articleItem from "~/components/article-item/index.vue";
import publicFooter from "~/components/public-footer/index.vue";
import userInfo from "~/components/user-info/index.vue";
import myLabel from "~/components/my-label/index.vue";
import wbrs from "~/components/wbrs/index.vue";
import scollTop from "~/components/scoll-top/index.vue";
import Login from '~/components/login/index.vue';
import request from '~/request/request';
import { getCookies } from '../utils';
import baudupush from '../utils/baidupush';
import mixins from '~/mixins/mixins';
export default {
    name: 'IndexPage',
    async asyncData({ app }) {
        try {
            let nav = await request('/api/index/getNav');
            let logoInfo = await request('/api/index/getBlogTitle');
            let topImg = await request('/api/index/getTopImg');
            let banner = await request('/api/index/getBanner');
            let article = await request('/api/article/getArticleAll?page=1&pageSize=10');
            let links = await request('/api/index/getLink');
            let userInfo = await request('/api/index/getMyUserInfo');
            let labels = await request('/api/index/getMyLable');
            let wbrs = await request('/api/index/getHotSearch');
            app.head.title = logoInfo.data.title;
            app.head.meta.push(
                {
                    name: 'keywords',
                    content: logoInfo.data.keywords
                },
                {
                    name: 'description',
                    content: logoInfo.data.brfie
                },
            )
            if(logoInfo.data.more_meta && JSON.parse(logoInfo.data.more_meta)){
                app.head.meta = app.head.meta.concat(JSON.parse(logoInfo.data.more_meta));
            }
            return {
                nav: nav.data,
                logoInfo: logoInfo.data,
                topInfo: topImg.data,
                banner: banner.data,
                article: article.data,
                links: links.data,
                userInfo: userInfo.data,
                labels: labels.data,
                wbrs: wbrs.data
            }
        } catch (error) {
            return {}
        }
    },
    components: {
        HomeHeader,
        bannerTop,
        banner,
        articleItem,
        publicFooter,
        userInfo,
        myLabel,
        wbrs,
        scollTop,
        Login,
    },
    mixins: [mixins],
    data() {
        return {
            nav: [],
            logoInfo: {},
            topInfo: {},
            banner: [],
            article: {},
            links: [],
            userInfo: {},
            labels: [],
            wbrs: [],
            // rightStyle : {},
            page: 1,
            pageSize: 10,
            loginTypes: ['right', 'pup']
        }
    },
    computed: {
        isShowMore() {
            return this.article.data && this.article.data.length !== this.article.count;
        }
    },
    async mounted() {
        baudupush();
        this.showMoreShow();
        let userInfo = await this.$store.dispatch('user/getUserInfo')
        if (userInfo.isLogin) {
            this.loginTypes = [];
        }
    },
    methods: {

        /**加载更多*/
        async loadMore() {
            this.page++;
            let res = await request(`/api/article/getArticleAll?page=${this.page}&pageSize=${this.pageSize}`);
            this.article.data = this.article.data.concat(res.data.data);
        },
        /**加载更多出现 去请求加载更多*/
        showMoreShow() {
            let dom = document.querySelector('.more');
            const observer = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting) {
                    this.loadMore();
                }
            });
            observer.observe(dom);
        },
        /**打开登录*/
        openLogin(type) {
            if (type === 'phone')
                this.$refs.phineLogin.openLogin(type);
            else
                this.$refs.login.openLogin(type);
        },
        loginSuccess(data) {
            this.loginTypes = [];
            this.$refs.homeHeader.getLoginInfo();
        },
        /**退出登录*/
        loginOut() {
            this.loginTypes = ['right', 'pup'];
        }
    }
}
</script>

<style lang="scss" scoped>
.main-box {
    width: 100%;
    background-color: #F8F9FB;
    position: relative;
    z-index: 2;

    .content-box {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding: 20px;
        box-sizing: border-box;

        .content-left {
            width: 79%;

            .more {
                font-size: 16px;
                color: #333;
                margin-bottom: 20px;
                user-select: none;
                text-align: center;
            }
        }

        .content-right {
            width: 20%;
            position: sticky;
            top: 100px;
        }

        .content-right-fixed {
            position: fixed;
            top: -170px;
        }

    }

    @media screen and (max-width: 768px) {
        .content-box {
            display: block;
            box-sizing: border-box;
            padding: 0;


            .content-left {
                width: 100%;
            }

            .content-right {
                display: none;
            }
        }
    }
}
</style>